<template>
  <div class="cus">
    <div class="cus_box">
      <div class="title">
        <span>UserDetails</span>
        <i @click="$emit('userDetailsCall')" class="el-icon-close"></i>
      </div>
      <div class="content">
        <div class="item">
          <div class="item_tit">
            <span>基础信息</span>
          </div>
          <div class="c1">
            <table border="1" cellspacing="0">
              <tr>
                <td class="logo" style="width:130px;" rowspan="3">
                  <img :src="details.headImg" alt />
                </td>
                <td>ID</td>
                <td>{{ details.userId }}</td>
                <td>Name</td>
                <td>{{ details.nickName }}</td>
              </tr>
              <tr>
                <td>Phone码</td>
                <td>{{ details.phone }}</td>
                <td>性别</td>
                <td>
                  {{
                    details.gender == 1
                      ? "男"
                      : details.gender == 2
                      ? "女"
                      : "保密"
                  }}
                </td>
              </tr>
              <tr>
                <td>Registration Time</td>
                <td>{{ details.ctime }}</td>
                <td>最后登录时间</td>
                <td>{{ details.loginTime }}</td>
              </tr>
            </table>
          </div>
        </div>

        <div class="item">
          <div class="item_tit">
            <span>Statistics信息</span>
          </div>
          <div class="c2">
            <table border="1" cellspacing="0">
              <tr>
                <td>租车订单数量</td>
                <td>租车订单总Money</td>
                <td>Battery Swap Orders数量</td>
                <td>Battery Swap Orders总Money</td>
                <td>充电订单数量</td>
                <td>充电订单总Money</td>
                <td>总PaymentMoney</td>
              </tr>
              <tr>
                <td>{{ details.params.carCount }}</td>
                <td>￥{{ details.params.carAmount }}</td>
                <td>{{ details.params.excCount }}</td>
                <td>￥{{ details.params.excAmount }}</td>
                <td>{{ details.params.chrCount }}</td>
                <td>￥{{ details.params.chrAmount }}</td>
                <td>￥{{ details.params.payAmount }}</td>
              </tr>
            </table>
          </div>
        </div>

        <!--                <div class="item">-->
        <!--                    <div class="item_tit"><span>Package Information</span></div>-->
        <!--                    <div class="c3">-->
        <!--                        <table border="1" cellspacing="0">-->
        <!--                              <tr>-->
        <!--                                <td>收货人</td>-->
        <!--                                <td>Phone码</td>-->
        <!--                                <td>地址</td>-->
        <!--                                <td>Status</td>-->
        <!--                              </tr>-->
        <!--                              <tr v-for="item in details.address">-->
        <!--                                <td>{{item.name}}</td>-->
        <!--                                <td>{{item.phone}}</td>-->
        <!--                                <td>{{item.address||item.locationAddress}}</td>-->
        <!--                                <td>{{item.defaultAddress==1?'默认地址':''}}</td>-->
        <!--                              </tr>-->
        <!--                        </table>-->
        <!--                    </div>-->
        <!--                </div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "userDetails",
  data() {
    return {
      details: {
        params: {}
      }
    };
  },
  props: ["res"],
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      var res = await this.apis.userDetails({
        id: this.res.id
      });
      this.details = res.data;
    }
  }
};
</script>

<style scoped lang="scss">
.item {
  margin-top: 10px;
  table {
    width: 100%;
    margin-top: 10px;
    border: 1px solid #eee;
    tr {
      height: 40px;
      td {
        padding-left: 10px;
      }
    }
  }
}

.logo {
  text-align: center;
  img {
    width: 100px;
    height: 100px;
    /*border-radius: 50%;*/
  }
}
</style>
